import React from 'react';
import PropTypes from 'prop-types';
import { Select, Input } from 'antd';

const PhoneForm = React.forwardRef(
    ({ onChange, value, selectProps, inputProps, areaCodeProps }, ref) => {
        const handleSelect = e => {
            onChange({
                areaCode: e,
                mobile: value.mobile
            });
        };
        // see: https://github.com/ant-design/ant-design/issues/2367
        let areaCodeList = [];
        // 这里做自定义下拉项
        if (areaCodeProps === undefined) {
            areaCodeList = [
                { areaCode: null, areaName: selectProps.placeholder },
                { areaCode: '86', areaName: '86' },
                { areaCode: '65', areaName: '65' }
            ]
        } else {
            areaCodeList = areaCodeProps
        }
        const handleInput = e => {
            onChange({
                areaCode: value.areaCode,
                mobile: e.target.value
            });
        };
        return (
            <div ref={ref}>
                <Select
                    value={value.areaCode}
                    onChange={handleSelect}
                    style={{ width: '25%' }}
                    {...selectProps}
                >
                    {areaCodeList.map(item => (
                        <Select.Option
                            value={item.areaCode}
                            key={item.areaCode}
                            disabled={item.areaCode == null}
                        >
                            {item.areaName}
                        </Select.Option>
                    ))}
                </Select>
                <Input
                    value={value.mobile}
                    onChange={e => handleInput(e)}
                    style={{ marginLeft: 8, width: 'calc(75% - 8px)' }}
                    {...inputProps}
                />
            </div>
        );
    }
);
PhoneForm.propTypes = {
    onChange: PropTypes.func,
    selectProps: PropTypes.object,
    inputProps: PropTypes.object
};
PhoneForm.defaultProps = {
    onChange: () => {},
    selectProps: {},
    inputProps: {}
};
export default PhoneForm;
